<template>
  <div>
    <el-drawer
      :visible.sync="modelValue"
      :size="size"
      :show-close="false"
      @close="closeDrawer"
      :destroy-on-close="destroyOnClose"
      :append-to-body="appendToBody"
      :direction="direction"
    >
      <template #title>
        <div>
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div style="font-size: 18px;font-weight: 600;color: #333;position: relative;top: 30%">{{headTitle}}</div>
            <text v-if="showClose" class="iconfont icon-quxiao hover-proite" @click="modelValue = false"></text>
          </div>
          <div style="width:100%;height:5px;border-bottom: 1px solid #efefef;"></div>
        </div>
      </template>
      <template #default>
        <slot></slot>

        <div v-if="hasFooter" style="position: absolute;bottom: 10px;right: 10px">
          <slot name="footerBar">
            <div style="display: flex;align-items:center;justify-content: flex-end; ">
              <el-button type="primary" @click="sumitEmit">确定</el-button>
              <el-button @click="closeThrowDrawer">取消</el-button>
            </div>
          </slot>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "ElDrawerComp",
  props:{
    headTitle:{
      type:String
    },
    size:{
      default:"40%",
      type:String
    },
    showClose:{
      type:Boolean,
      default:false
    },
    hasFooter:{
      type:Boolean,
      default:false
    },
    destroyOnClose:{
      type:Boolean,
      default:false
    },
    appendToBody:{
      type:Boolean,
      default:false
    },
    direction:{
      default:"rtl",
      type:String
    }
  },
  data(){
    return {
      modelValue:false
    }
  },
  methods:{
    openDrawer(){
      this.modelValue = true
    },
    closeDrawer(){
      this.modelValue = false
    },
    closeThrowDrawer(){
      this.$emit('throwCloseDrawer')
      this.closeDrawer()
    },
    sumitEmit(){
      this.$emit('throwSumitEmit')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header{
  margin-bottom:0;
  padding-left: 10px;
}
</style>
